<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.hezi {
				width: 500px;
				height: 500px;
				/*background-color: #fcfcfc;*/
				/*border: 1px solid;*/
				border: 1px solid;
				box-shadow: #ccc 2px 2px 2px;
				margin: 0 auto;
			}
			.hezi>div {
				padding-top: 20px;
			}
			.kuang {
				border: 0;
				border-bottom: 1px solid #aaa;
				/*outline: none;*/
			}
			span {
				display: inline-block;
				width: 100px;
				padding-left: 40px;
				text-align: right;
			}
			h1 {
				text-align: center;
			}
			.button {
				width: 140px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
		</style>
	</head>
	<body>
		<h1>表单</h1>
		<div class="hezi">
			<div>
				<span>用户名：</span>
				<input class="kuang" id="username" type="text" value="" placeholder="请输入用户名" />
				<input type="button" value="检验用户名是否合法" onclick="getValue()" />
			</div>
			<div><span>密码：</span><input class="kuang" type="password" /></div>
			<div><span>确认密码：</span><input class="kuang" type="password" /></div>
			<div>
				<span>性别：</span>
				<input type="radio" name="sex" value="male" />男
				<input type="radio" name="sex" value="female" />女
			</div>
			<div>
				<span>爱好：</span>
				<input type="checkbox" name="hobby" value="basketball" />篮球
				<input type="checkbox" name="hobby" value="run" />跑步
				<input type="checkbox" name="hobby" value="swim" />游泳
			</div>
			<div>
				<span>专业：</span>
				<select name="">
					<option value="1">软件技术</option>
					<option value="2">计算机技术</option>
					<option value="3">网络技术</option>
				</select>
			</div>
			<div>
				<span>个人简介：</span>
				<textarea></textarea>
			</div>
			<div>
				<span>头像：</span>
				<input type="file" />
			</div>
			<div class="button">
				<input type="button" value="提交" />
				<input type="button" value="重置" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		function getValue(){
			let oUserName = document.getElementById('username')
			console.dir(oUserName.value)
		}
	</script>
</html>
